<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, CSS, JavaScript, jQuery, bootstrap5">
    <meta name="author" content="creativemela">
    <meta name="description" content="Discover Tawam, a versatile personal portfolio HTML template by Creativemela. Ideal for showcasing your work, Tawam offers sleek design, multiple layouts, and comprehensive UI/UX services. Perfect for designers, developers, and creatives.">
    {% load static %}
    <!-- Title -->
    <title>B站UP主数据收集分析系统</title>

    <!-- Favicon -->


    <!-- CSS File -->
    <link rel="stylesheet" href="{%static 'css/animate.min.css' %}">
    <link rel="stylesheet" href="{%static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-icons.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fontawesome.all.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/backToTop.css' %}">
    <link rel="stylesheet" href="{% static 'css/owl.carousel.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/odometer-theme-default.css' %}">
    <link rel="stylesheet" href="{% static 'css/magnific-popup.css' %}">

    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <link rel="stylesheet" href="{% static 'css/responsive.css' %}">
    
</head>

<body>

    <!-- Main Area Start -->
    <main id="home">

        <!-- START: PROJECT SECTION -->
        <section id="works" class="project-section section-p">
            <div class="row">
                <div class="col-md-5 d-none d-md-block">
                    <div>
                        <div>
                            <div class="thumbnail-wrapper wow fadeInLeft" data-wow-delay=".3s">
                                <img class="profile-pic" src="{% static data.image %}" alt="thumbnail">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="intro-wrapper col-md-7">
                    <div class="intro-inner mb-xl-5 ps-md-4 ps-xxl-5 pb-xl-5">
                        <div>
                            <h1 class="wow fadeInRight" data-wow-delay=".5s"><span class="sub-text">{{data.name}}</span></h1>
                        </div>
                        <div class="d-flex flex-wrap gap-4 wow fadeInUp" data-wow-delay=".8s" style="margin-top: 100px;">
                            <p style="width: 70%;">{{data.date}}</p>
                            <p class="btn btn-primary video" url="{{data.url}}">原视频</p>
                        </div>
                    </div>
                </div>
            </div>

        <div class="d-flex justify-content-center wow fadeInUp" data-wow-delay=".7s" style="margin-top: 20px;">
            {{myechart|safe}}
        </div>

        </section>
        <!-- END: PROJECT SECTION -->




    </main>
    <!-- Main Area End -->




    <!-- **** All JS Files ***** -->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/backToTop.js' %}"></script>
    <script src="{% static 'js/smooth-scroll.js' %}"></script>
    <script src="{% static 'js/appear.min.js' %}"></script>
    <script src="{% static 'js/wow.min.js' %}"></script>
    <script src="{% static 'js/one-page-nav.js' %}"></script>
    <script src="{% static 'js/owl.carousel.min.js' %}"></script>
    <script src="{% static 'js/isotope.pkgd.min.js' %}"></script>
    <script src="{% static 'js/odometer.min.js' %}"></script>
    <script src="{% static 'js/magnific-popup.js' %}"></script>
    <script src="{% static 'js/validate.min.js' %}"></script>

    <!-- Custom JS -->
    <script src="{% static 'js/main.js' %}"></script>
    <script src="{% static 'js/active.js' %}"></script>
    <script src="{% static 'js/contact-form.js' %}></script>
</body>

</html>